<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>熄灯侠</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .pc {
            width: 100vw;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 20px;
        }

        .yd {
            display: none;
        }

        @media screen and (max-width: 900px) {
            .pc {
                display: none;
            }

            .yd {
                display: flex;
                flex-direction: column;
                width: 100vw;
                height: 100vh;
                background-image: linear-gradient(top, green, blue);
                background-image: -webkit-linear-gradient(top, #888, #555);
                color: #fff;
            }

            .yd .top {
                height: 10vh;
                margin-top: 10vh;
                display: flex;
                align-items: center;
                padding: 0 10px;
                box-sizing: border-box;
                justify-content: space-between;
            }

            .yd .game {
                display: flex;
                flex-direction: column;
            }

            .yd .game .row {
                width: 100%;
                display: flex;
                justify-content: space-evenly;
                margin-bottom: 1vw;
            }

            .yd .game .row div {
                width: 15vw;
                height: 15vw;
                background-position: center;
                background-size: contain;
                background-repeat: no-repeat;
            }

            .yd .game .row .close {
                background-image: url(img/close.png);
            }

            .yd .game .row .open {
                background-image: url(img/open.png);
            }

            .yd .login,
            .yd .next,
            .yd .phb {
                position: fixed;
                width: 100vw;
                height: 100vh;
                background-color: rgba(0, 0, 0, .3);
                justify-content: center;
                align-items: center;
                display: none;
            }

            .yd .login .card {
                background-color: #fff;
                width: 90%;
                padding: 16px;
                box-sizing: border-box;
                border-radius: 8px;
                background-image: linear-gradient(top, green, blue);
                background-image: -webkit-linear-gradient(top, #888, #555);
            }

            .yd .login .card .ipt {
                height: 8vw;
                margin-bottom: 2vw;
            }

            .yd .login .card .ipt input {
                border: 0;
                outline: 0;
                background-color: transparent;
                display: block;
                width: 100%;
                height: 100%;
                color: #fff;
                text-align: center;
            }

            .yd .login .card .ipt input::placeholder {
                color: #ccc;
            }

            .yd .btn {
                width: 80%;
                height: 10vw;
                background-color: #333;
                line-height: 10vw;
                text-align: center;
                margin: 16px auto;
            }

            .yd .next {
                display: none;
                justify-content: center;
                flex-direction: column;
            }

            .yd .next img {
                width: 80%;
                margin-bottom: 20px;
            }

            .yd .next p {
                font-size: 30px;
            }

            .yd .phb {
                ul {
                    width: 90%;
                    padding: 16px;
                    box-sizing: border-box;
                    background-color: #ccc;
                    border-radius: 8px;

                    li {
                        height: 26px;
                        line-height: 26px;
                        display: flex;
                        align-items: center;

                        span {
                            width: 0;
                        }

                        span:nth-of-type(1) {
                            flex-grow: 1;
                        }

                        span:nth-of-type(2) {
                            flex-grow: 4;
                        }

                        span:nth-of-type(3) {
                            flex-grow: 2;
                        }
                    }
                }
            }
        }
    </style>
</head>

<body>
    <div class="pc">
        <p>请使用移动端打开！</p>
    </div>
    <div class="yd">
        <div class="top">
            <p class="level" style="text-align: right;">第1关</p>
            <p class="username">匿名</p>
        </div>
        <div class="game">
            <div class="row" row="1">
                <div class="close" column="1"></div>
                <div class="close" column="2"></div>
                <div class="close" column="3"></div>
                <div class="close" column="4"></div>
                <div class="close" column="5"></div>
                <div class="close" column="6"></div>
            </div>
            <div class="row" row="2">
                <div class="close" column="1"></div>
                <div class="close" column="2"></div>
                <div class="close" column="3"></div>
                <div class="close" column="4"></div>
                <div class="close" column="5"></div>
                <div class="close" column="6"></div>
            </div>
            <div class="row" row="3">
                <div class="close" column="1"></div>
                <div class="close" column="2"></div>
                <div class="close" column="3"></div>
                <div class="close" column="4"></div>
                <div class="close" column="5"></div>
                <div class="close" column="6"></div>
            </div>
            <div class="row" row="4">
                <div class="close" column="1"></div>
                <div class="close" column="2"></div>
                <div class="close" column="3"></div>
                <div class="close" column="4"></div>
                <div class="close" column="5"></div>
                <div class="close" column="6"></div>
            </div>
            <div class="row" row="5">
                <div class="close" column="1"></div>
                <div class="close" column="2"></div>
                <div class="close" column="3"></div>
                <div class="close" column="4"></div>
                <div class="close" column="5"></div>
                <div class="close" column="6"></div>
            </div>
            <div class="row" row="6">
                <div class="close" column="1"></div>
                <div class="close" column="2"></div>
                <div class="close" column="3"></div>
                <div class="close" column="4"></div>
                <div class="close" column="5"></div>
                <div class="close" column="6"></div>
            </div>
        </div>
        <div class="btn restart">重新开始</div>
        <div class="btn phbBtn">排行榜</div>
        <div class="login">
            <div class="card">
                <div class="ipt">
                    <input type="text" placeholder="请输入用户名">
                </div>
                <div class="ipt">
                    <input type="password" placeholder="请输入密码">
                </div>
                <div class="btn loginBtn">
                    登录
                </div>
            </div>
        </div>
        <div class="next">
            <img src="./img/gx.png" alt="">
            <p>进入下一关卡</p>
        </div>
        <div class="phb">
            <ul>
                <!-- <li>
                    <span>1</span>
                    <span>LEO</span>
                    <span>198</span>
                </li> -->
            </ul>
        </div>
    </div>
</body>
<script src="./jquery.min.js"></script>
<script>
    // 是否有登录，未登录必须先登录
    $(function() {
        if (localStorage.getItem('user')) {
            $('.login').hide()
            let user = localStorage.getItem("user");
            user  = JSON.parse(user);
            $(".username").text(user.uacc)
        } else {
            $('.login').css('display', 'flex')
        }
    })
    $('.loginBtn').click(function () {
        console.log(11);
        let username = $('.login input').eq(0).val()
        let password = $('.login input').eq(1).val()
        if (username === '' || password === '') {
            alert('用户名或密码不能为空')
            return
        }
        $.ajax({
            url: "http://localhost:8989/idiom/user/login",
            type: "POST",
            // data: {
            //     uacc: username,
            //     upwd: password
            // }, // 发送到服务器的数据
            data:JSON.stringify({uacc: username,upwd: password}),
            contentType:"application/json",
            dataType: "json", // 预期的服务器响应类型
            success: function (response) {
                let user = response.data
                localStorage.clear()
                localStorage.setItem('user', JSON.stringify(user))
                $('.username').html(user.uacc)
                $('.login').hide()
            },
            error: function (xhr, status, error) {
                // 请求失败时的回调函数
                console.log("请求失败:", status, error);
            }
        });
    })
    let level = 1;
    $('.row').click(function (e) {
        let row = $(this).attr('row') / 1 - 1;
        let column = $(e.target).attr('column') / 1 - 1;
        clickLight(row * 6 + column)

        checkWin()
    })

    function checkWin() {
        if ($('.open').length === 0) {
            $('.next').css('display', 'flex')
            level++
            $('.level').text('第' + level + '关')
            beginGame()
            setTimeout(function () {
                $('.next').css('display', 'none')
            }, 2000)

            let user = JSON.parse(localStorage.getItem('user'))
            $.ajax({
                url: "http://localhost:8989/idiom/game/saveScore",
                type: "POST",
                // data: {
                //
                // }, // 发送到服务器的数据
                data:JSON.stringify({uid: user.id,score: level - 1}),
                contentType:"application/json",
                dataType: "json", // 预期的服务器响应类型
                success: function (response) {

                },
                error: function (xhr, status, error) {
                    // 请求失败时的回调函数
                    console.log("请求失败:", status, error);
                }
            });
        }
    }


    function clickLight(n = -1) {
        if (n == -1) {
            n = rand(0, 36)
        }
        let arr = [n];
        if (n - 6 >= 0) {
            arr.push(n - 6)
        }
        if (n + 6 <= 35) {
            arr.push(n + 6)
        }
        if (n % 6 !== 0) {
            arr.push(n - 1)
        }
        if (n % 6 !== 5) {
            arr.push(n + 1)
        }
        changeLight(arr)
    }

    function rand(min, max) {
        return Math.floor(Math.random() * (max - min) + min);
    }

    function beginGame() {
        for (let i = 0; i < level; i++) {
            clickLight()
        }
    }
    function changeLight(arr) {
        for (let i = 0; i < arr.length; i++) {
            let row = Math.floor(arr[i] / 6)
            let column = arr[i] % 6
            let light = $('.row').eq(row).children().eq(column);
            if (light.attr('class') === 'close') {
                light.attr('class', 'open')
            } else {
                light.attr('class', 'close')
            }
        }
    }
    beginGame()

    $('.restart').click(function () {
        console.log(123123)
        $('.row').children().attr('class', 'close')
        level = 1;
        $('.level').text('第' + level + '关')
        beginGame()
    })

    $('.phbBtn').click(function () {
        $('.phb').css('display', 'flex')
        let user = JSON.parse(localStorage.getItem('user'))
        $.ajax({
            url: "http://localhost:8989/idiom/game/list",
            type: "POST",
            // data: { uid: user.id }, // 发送到服务器的数据
            data: JSON.stringify({uid:user.id }), // 发送到服务器的数据
            contentType:"application/json",
            dataType: "json", // 预期的服务器响应类型
            success: function (response) {
                let str = ''
                response.data.forEach((item, index) => {
                    str += `<li>
                        <span>${index + 1}</span>
                        <span>${item.uacc}</span>
                        <span>${item.score}</span>
                    </li>`
                })
                $('.phb ul').html(str)
            },
            error: function (xhr, status, error) {
                // 请求失败时的回调函数
                console.log("请求失败:", status, error);
            }
        });


    })
    $('.phb').click(function () {
        $('.phb').css('display', 'none')
    })
</script>

</html>
